<!doctype html>
<html lang="en">
	<head>
		<title>js调用摄像头拍照上传图片</title>
		<meta charset="utf-8">
	</head>
	<body>
		<button onclick="openMedia()">开启摄像头</button>
		<button onclick="sendPhoto()">发送录像</button>
		<button onclick="sync()">连接视频</button>
		<button onclick="takePhoto()">拍照</button>
		<button onclick="closeMedia()">关闭摄像头</button>
		<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
		<canvas id="canvas" width="500px" height="500px"></canvas>
		<img id="imgTag" src="" alt="imgTag">
		<script>
			var ws = new WebSocket("ws://localhost:8080/webSocket");
			 
			ws.onopen = function(evt) {
				console.log("Connection open ...");
				ws.send("Hello WebSockets!");
			};
			 
			ws.onmessage = function(evt) {
				console.log("Received Message: " + evt.data);
			};
			 
			ws.onclose = function(evt) {
				console.log("Connection closed.");
			};
			
			function send(){
				let txt = document.getElementById("txt").value;
				ws.send(txt);
			}
			
			/* 摄像头相关 */
			
			let mediaStreamTrack = null; // 视频对象(全局)
			function openMedia() {
				let constraints = {
					video: {
						width: 500,
						height: 500
					},
					audio: true
				};
				//获得video摄像头
				let video = document.getElementById('video');
				let promise = navigator.mediaDevices.getUserMedia(constraints);
				promise.then((mediaStream) => {
					mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
					video.srcObject = mediaStream;
					video.play();
				});
			}

			// 拍照
			function takePhoto() {
				//获得Canvas对象
				let video = document.getElementById('video');
				let canvas = document.getElementById('canvas');
				let ctx = canvas.getContext('2d');
				ctx.drawImage(video, 0, 0, 500, 500);


				// toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
				let img = document.getElementById('canvas').toDataURL();
				// 这里的img就是得到的图片
				console.log('img-----', img);
				document.getElementById('imgTag').src = img;
			}

			// 关闭摄像头
			function closeMedia() {
				mediaStreamTrack.stop();
			}
			
			function sync(){
				setInterval(function(){
					sendPhoto();
				},1)
			}
			
			// 拍照
			function sendPhoto() {
				//获得Canvas对象
				let video = document.getElementById('video');
				let canvas = document.getElementById('canvas');
				let ctx = canvas.getContext('2d');
				ctx.drawImage(video, 0, 0, 500, 500);
			
				// toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
				let img = document.getElementById('canvas').toDataURL();
				// 这里的img就是得到的图片
				ws.send(img);
			}
			
		</script>
	</body>
